﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <link href="//unpkg.com/layui@2.10.1/dist/css/layui.css" rel="stylesheet">
    <style>
        /* 整体容器样式，添加一些内边距和背景色 */
        body {
            padding: 20px;
            background-color: #f4f4f4;
        }

        /* 表单样式，设置表单的背景色和边框 */
        .layui-form {
            background-color: #fff;
            padding: 20px;
            border: 1px solid #e6e6e6;
            border-radius: 5px;
        }

        /* 表单标签样式，统一宽度和对齐方式 */
        .layui-form-item.layui-form-label {
            width: 120px;
            text-align: right;
            padding-right: 10px;
            font-weight: normal;
        }

        /* 表单输入框内联样式，调整间距 */
        .layui-input-inline {
            margin-bottom: 15px;
        }

        /* 按钮样式，添加一些间距和颜色 */
        .layui-btn {
            margin-right: 10px;
        }

        /* 表格样式，设置表格的背景色和边框 */
        .layui-table {
            background-color: #fff;
            border: 1px solid #e6e6e6;
            border-radius: 5px;
        }

        /* 表格表头样式，设置背景色和文字颜色 */
        .layui-table-header {
            background-color: #f2f2f2;
        }

        /* 表格单元格样式，添加一些内边距 */
        .layui-table-cell {
            padding: 10px;
        }
    </style>
</head>

<body>
    <form class="layui-form" action="" id="baseStoreForm">
        <div class="layui-form-item">
            <label class="layui-form-label" style="width:auto">客户名称</label>
            <div class="layui-input-inline">
                <input type="text" name="CustomerName" class="layui-input">
            </div>
            <label class="layui-form-label" style="width:auto">联系人</label>
            <div class="layui-input-inline">
                <input type="text" name="Contact" class="layui-input">
            </div>
            <button class="layui-btn" lay-submit lay-filter="saveCustomer">确定</button>
        </div>
    </form>

    <table class="layui-hide" id="role-table"></table>
    <script src="~/lib/layui/layui.js"></script>
    <script>
        layui.use(['table', 'jquery', 'layer'], function () {
            var table = layui.table;
            var $ = layui.jquery;
            var layer = layui.layer;

            table.render({
                elem: '#role-table',
                id: 'clientTable',
                height: '500',
                cols: [[
                    { field: 'uid', title: 'ID', fixed: 'left', width: 110, sort: true },
                    { field: 'customerName', title: '客户名称', width: 200 },
                    { field: 'abbreviation', title: '简称', width: 200 },
                    { field: 'companyAddr', title: '公司地址', width: 200 },
                    { field: 'contact', title: '联系人', width: 200 },
                    { field: 'phone', title: '手机号', width: 200 },
                    { field:'state', title: '状态', width: 200, templet: function (d) {
                            var switchStatus = d.state == 0? 'checked' : '';
                            return '<input type="checkbox" name="stateSwitch" lay-skin="switch"'+ switchStatus + '>';
                        } }
                ]]
            });

            function loadClient() {
                layer.load(2);
                var customerName = $('[name="CustomerName"]').val();
                var contact = $('[name="Contact"]').val();
                var params = {
                    CustomerName: customerName,
                    Contact: contact
                }
                $.ajax({
                    //url: 'http://localhost:5234/api/Customermanage/GetCustomers',
                    url: "@ViewBag.BaseUrl/T7/Customermanage/GetCustomers",
                    data: params,
                    type: 'get',
                    dataType: 'json',
                    // timeout:90000,
                    // beforeSend:function(xhr){
                    //     xhr.setRequestHeader("Authorization",'Bearer'+)
                    // }
                    headers: {
                        'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJVc2VyTmFtZSI6IlpDIiwiVXNlcklkIjoiMSIsImV4cCI6MTc0MzA0NTAwOSwiaXNzIjoiZ3JvdXBUd28iLCJhdWQiOiJncm91cFR3byJ9.o5KYnBxK-O0VAF14_yv1hTRDUIiNNY023m0Cy2VkTgE',
                        'Accept': 'application/json'
                    },
                    success: function (res) {
                        console.log(res);
                        layer.closeAll('loading');
                        if (res && res.data && res.code === 210) {
                            table.reload('clientTable', {
                                data: res.data
                            })
                        } else {
                            layer.msg('未获取到数据');
                        }
                    },
                    error: function () {
                        layer.closeAll('loading');
                        layer.msg('请求数据失败');
                    }
                });
            }

            loadClient();

            // 表单提交事件
            layui.form.on('submit(saveCustomer)', function () {
                loadClient();
                return false; // 阻止表单跳转
            });
        });
    </script>
</body>

</html>